<template>
	<view>
		<view class="head-nav">
			<view class="bg"></view>
			<view class="nav-list">
				<view class="item" v-for="(item,index) in headNavList" :key="index" @tap="typeChange(index)">
					<view class="iconfont" :class="item.icon" :style="{color:item.colorType}"></view>
					<view class="title" :style="{color:searchIndex == index ? item.colorType:'#333333'}">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="informNone" v-if="inform_data.length <= 0">没有相关通知哦~</view>
		<view class="informList" v-else>
			<view class="informList-item" v-for="(item, index) in inform_data" :key="index" @longtap="longTapEvent(item)"
			 @click="checkTask(item.push_type, item.notice_push_id,item.groupid,index)">
				<view class="item-content">
					<view class="item-content-wrap">
						<text class="item-content-title" :class="item.push_state == 1 ? 'onreadstyle' : ''">{{ item.push_text ? item.push_text:'暂无标题'}}</text>
						<text class="item-content-logo">{{ item.subject_name ? item.subject_name : '' }}</text>
					</view>
					<view class="item-content-inform">
						<view class="text">
							<rich-text class="text" v-if="item.text" :class="item1.http? 'textClass':''" :nodes="item1.url[0]" v-for="(item1,index1) in item.text"
							 :key="index1" @tap="gotowebview(item1)"></rich-text>
							<rich-text class="text" v-else :nodes="item.push_content"></rich-text>
						</view>
						<view>{{item.creat_time}}</view>
					</view>
				</view>
				<view class="item-icon" v-show="item.push_type == 4 || item.push_type == 10 || item.push_type == 11 || item.push_type == 12 || item.push_type == 13 || item.push_type == 999">
					<i class="iconfont iconfanhui" style="font-size: 40upx;color: #CCCCCC;"></i>
				</view>
			</view>
			<uni-load-more v-if="inform_data.length >= 16" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>
<script>
	import cDate from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	var _this;
	export default {
		comments: {
			uniLoadMore
		},
		data() {
			_this = this;
			return {
				inform_data: [], //列表
				notice_push_id_arr: [], //列表ID集合
				flag_ids: [], //列表未读消息ID集合
				headNavList: [{ // 头部分类菜单栏
					icon: 'iconquanbu',
					title: '全部',
					type: 'all',
					colorType: '#FF7171'
				}, {
					icon: 'iconbanjiguanli-mian',
					title: '班级',
					type: 'group',
					pushType: [4, 7, 9, 14],
					colorType: '#FF9900'
				}, {
					icon: 'iconxueqing_mian',
					title: '学情',
					type: 'point',
					pushType: [1, 2, 3, 5, 6],
					colorType: '#A96AFB'
				}, {
					icon: 'iconzhibo',
					title: '直播',
					type: 'live',
					pushType: [8],
					colorType: '#00D5A2'
				}],
				searchIndex: 0, //当前选择类型索引
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			};
		},
		// 右上角事件
		onNavigationBarButtonTap(e) {
			// 清空所有消息
			switch (e.index) {
				case 0:
					if (this.notice_push_id_arr.length > 0) {
						this.removeInform(true, null)
					} else {
						uni.showToast({
							title: '没有更多通知啦~',
							icon: 'none'
						})
					}
					break
				case 1:
					// 标记所有消息为已读
					this.flagAllMsg()
					break
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onLoad() {
			this.getList();
		},
		methods: {
			// 获取通知列表
			getList() {
				var data = {
					page: this.page,
					pagesize: 18,
				}
				if (this.searchIndex != 0) {
					data.push_type = this.headNavList[this.searchIndex].pushType.join(',')
				}
				this.$zapi.apiPost('user/notice.User/noticeLists', data).then(res => {
					if (res.data.code == 200 && res.data.data.data.length > 0) {
						var data = res.data.data.data;
						for (var i = 0; i < data.length; i++) {
							if (data[i].subject_name) {
								data[i].subject_name = data[i].subject_name.substr(0, 1)
							}
							data[i].creat_time = cDate.getFormatTime(data[i].creat_time)
							if (data[i].push_content && data[i].push_content.indexOf('直播') != -1) {
								data[i].push_type = 999;
								if (data[i].push_content.indexOf('ident') != -1 && data[i].push_content.ident) {
									data[i].livaType = JSON.parse(data[i].push_content.replace(/&quot;/g, '"')).ident;
								}
								if (data[i].push_content.indexOf('courseKey') != -1 && data[i].push_content.courseKey) {
									data[i].courseKey = JSON.parse(data[i].push_content.replace(/&quot;/g, '"')).courseKey;
								}
								data[i].push_content = "直播";
							}
							data[i].push_content = data[i].push_content.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
							var dataarr = [];
							var arr = data[i].push_content.split('![](');
							arr.forEach((item, key) => {
								var a = item.split((')![]'));
								var data = {
									url: a
								}
								dataarr = dataarr.concat(data)
							})
							for (var j = 0; j < dataarr.length; j++) {
								dataarr[j].http = false;
								var header = dataarr[j].url[0].substring(0, 7);
								if (header == 'http://' || header == 'https:/') {
									dataarr[j].http = true;
								}
							}
							data[i].text = dataarr;
						}
						this.inform_data = this.reload ? data : this.inform_data.concat(data);
						this.getAllInform()
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.inform_data = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			// 获取后台所有通知消息
			getAllInform() {
				this.flag_ids = []
				this.notice_push_id_arr = []
				this.inform_data.forEach((item, index) => {
					this.notice_push_id_arr.push(item.notice_push_id)
					if (item.push_state == 0) {
						this.flag_ids.push(item.notice_push_id)
					}
				})
			},
			// 分类菜单栏点击事件
			typeChange(index) {
				this.searchIndex = index;
				this.page = 1;
				this.reload = true;
				this.getList();
			},
			// 长按删除指定消息
			longTapEvent(item) {
				this.removeInform(false, item.notice_push_id)
			},
			// 标记所有消息为已读
			flagAllMsg() {
				if (this.flag_ids.length > 0) {
					this.flagData(this.flag_ids)
					this.flag_ids = []
				} else {
					uni.showToast({
						title: '没有可清除的消息',
						icon: 'none'
					})
				}
			},
			// 删除通知
			removeInform: function(clearAll, notice_push_id) {
				// 删除相关操作。
				var _this = this;
				let msg = '确定清空当前所有消息？'
				if (!clearAll) {
					msg = '确定删除该条消息？'
				}
				uni.showModal({
					title: '提示',
					content: msg,
					success: res => {
						// 点击了确定，可以进行请求接口相关操作了。
						if (res.confirm) {
							_this.$zapi.apiPost('user/notice.User/noticeDelete', {
								notice_push_ids: clearAll ? this.notice_push_id_arr : [notice_push_id]
							}).then(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								if (clearAll) {
									this.inform_data = []
									this.notice_push_id_arr = []
								} else {
									// 删除缓存数据的通知，（避免设置this.inform_data = []页面闪顿）
									if (res.data.code == 200) {
										this.inform_data.forEach((val, i) => {
											if (val.notice_push_id == notice_push_id) {
												this.inform_data.splice(i, 1)
												return
											}
										})
										this.getAllInform()
									}
								}
							})
						}
					}
				});
			},
			// 查看作业&直播
			checkTask(push_type, id, groupid, index) {
				let labelList = [id]
				this.flagData(labelList)
				var type = 0;
				if (push_type == 4 || push_type == 10 || push_type == 11 || push_type == 12 || push_type == 13) {
					if (push_type == 4) {
						type = 0;
					} else if (push_type == 10) {
						type = 1;
					} else if (push_type == 11) {
						type = 2;
					} else if (push_type == 12) {
						type = 3;
					} else if (push_type == 13) {
						type = 4;
					}
					uni.navigateTo({
						url: '/pages/group/practise_task?groupid=' + groupid + '&type=' + type
					});
				} else if (push_type == 999) {
					//直播通知，跳转直播页面
					this.inform_data.forEach((item, index) => {
						if (item.notice_push_id == id) {
							if (item.livaType == 'windows') {
								uni.navigateTo({
									url: '/pages/live/winplay/winplay?courseKey=' + item.courseKey
								});
							} else if (item.livaType == 'app') {
								uni.navigateTo({
									url: '/pages/live/classRoom?courseKey=' + item.courseKey
								});
							}
						}
					});
				}
			},
			// 标记已读
			flagData(labelList) {
				this.$zapi.apiPost('user/notice.User/noticeRead', {
					notice_push_ids: labelList
				}).then(res => {
					if (res.data.code == 200) {
						labelList.forEach((v, i) => {
							this.inform_data.forEach((val, index) => {
								if (v == val.notice_push_id) {
									val.push_state = 1
									return
								}
							})
						})
						this.getAllInform()
					}
				})
			},
			// 前往网页
			gotowebview: function(item) {
				if (item.http) {
					uni.navigateTo({
						url: '../../group/group_notic_web?url=' + encodeURIComponent(JSON.stringify(item.url[0]))
					})
				}
			}
		},
		watch: {
			// TODO: （暂时不需要）监听复选框，来动态获取删除的数字
			inform_data: function() {}
		}
	};
</script>

<style lang="scss">
	// 条件编译改变checkbox
	/* #ifdef APP-PLUS ||MP-WEIXIN */
	checkbox .wx-checkbox-input {
		bottom: none;
		border-radius: 50% !important;
	}

	/* #endif */
	page {
		background: #FAFAFA;
	}

	/* 头部分类导航 */
	.head-nav {
		width: 100%;
		height: 200upx;
		position: fixed;
		z-index: 999;
		left: 0;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */

		.bg {
			width: 100%;
			height: 50%;
			background: #FF9900;
			border-radius: 0 0 30upx 30upx;
			position: absolute;
		}

		.nav-list {
			position: absolute;
			margin: 0 30upx;
			height: 160upx;
			width: calc(100% - 60upx);
			border-radius: 16upx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: 25%;
				height: 100%;
				text-align: center;

				.iconfont {
					font-size: 52upx;
				}

				.title {
					font-size: 32upx;
				}
			}
		}
	}

	// 通知列表
	.informNone {
		margin-top: 400upx;
		color: #999999;
		font-size: 38upx;
		text-align: center;
		width: 100%;
		position: fixed;
	}

	.informList {
		margin: 200upx 30upx 0;
		padding-bottom: 100upx;
	}

	.informList-item {
		display: flex;
		margin: 10upx auto;
		padding: 20upx 20px;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;

		.item-content {
			flex: 1;

			.item-content-wrap {

				// 标题内容溢出处理样式
				.item-content-title {
					display: inline-block;
					max-width: 600upx;
					overflow: scroll;
					white-space: nowrap;
				}

				.onreadstyle {
					color: #999999;
					width: 100%;
				}

				.item-content-logo {
					position: absolute;
					line-height: 32upx;
					height: 32upx;
					margin-left: 10upx;
					margin-top: 10upx;
					color: #fff;
					max-width: 32upx;
					text-align: center;
					overflow: hidden;
					background: #00ACFE;
				}
			}

			// 学情分余额
			.item-content-inform {
				width: 600upx !important;
				overflow: hidden !important;
				white-space: nowrap !important;
				text-overflow: ellipsis;
				color: #999999 !important;
				padding-right: 20upx !important;
			}
		}

		// 箭头容器样式
		.item-icon {
			position: absolute;
			right: 30upx;
			margin-top: 20upx;
		}
	}

	.text {
		width: 580upx;
		white-space: nowrap;
		overflow: scroll;
	}

	.textClass {
		text-decoration: underline;
	}
</style>
